<template>
    <!-- 全部评价 -->
    <div class="box">
        <div class="head">
            <van-icon name="arrow-left" />
            <span>评价</span>
            <span></span>
        </div>
        <button @click="showCenter=!showCenter">显示</button>
        <p>4.8（180条评价）</p>
        <div class="pjitem" v-for="i in 3" :key="i">
            <van-icon style="font-size: 1.5rem;padding:10px;transform: translate(10px,15px);background-color: #ffe9b0;border-radius: 50%;
     color: #ffb900;" name="contact-o" />
            <div class="pjuser">
                <p>用户昵称</p>
                <div class="pjtime">
                    <span>3天前</span>
                    <div>
                        <van-icon name="star" style="color: #ffb900;" /><span
                            style="color: #ffb900;">3</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <van-icon name="ellipsis" style="transform: rotate(90deg);font-size: 1.2rem;" />
                    </div>
                </div>
                <p style="transform: translate(-60px,5px);">评价文字描述信息实例</p>
            </div>
        </div>
        <van-popup v-model:show="showCenter" round style="padding: 64px;display: flex;flex-direction: column;
        justify-content: space-between;align-items: center" >
            <van-icon name="passed" style="font-size: 2rem;" />
            <br>
            <p style="font-size: 1.4rem;">你的评价已发送！</p>
            <br>
            <p>文字描述信息实力</p>
            <br>
            <button @click="showCenter=!showCenter" style="width: 100%;height: 40px;background-color: #ffb900;color: white;border: none;border-radius: 10px">确认</button>
        </van-popup>
    </div>

</template>

<script setup>
import { ref, reactive } from 'vue'

let showCenter=ref(false)
</script>
<style scoped>
.box {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 0 10px;
}

.head {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
}

.pjitem {
    width: 100%;
    height: 13%;
    position: relative;
    background-color: aliceblue;
    margin: 1.5rem auto;
}

.pjuser {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    top: 0;
    left: 4rem;
    height: 100%;
    width: 80%;
    /* margin-left: 10px; */
}

.pjtime {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>